<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>模板语法</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备一个容器 -->
  <div id="root">
    <h1>差值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr />
    <h1>指令语法</h1>
    <a v-bind:href="url.toUpperCase()">点我</a>
    <a :href="url">点我2</a>
  </div>

  <script>
    Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示

    new Vue({
      el: '#root',
      data: {
        name: 'jack',
        url: 'http://www.atguigu.com'
      }
    })
  </script>
</body>

</html>